// 定义图片懒加载插件
import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlugin = {
  install(app) {
    // 图片懒加载
    app.directive('img-lazy', {
      mounted(el, binding) {
        // el: 指令所绑定的元素，可以用来直接操作 DOM
        // binding: 一个对象，包含以下属性：
        //   value: 指令的绑定值，即 v-img-lazy="url" 中的 url
        //   oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 当元素进入视口时，加载图片
              el.src = binding.value
              // 停止监听，防止重复加载
              stop()
            }
          }
        )
      }
    })
  }
}
